<template>
	<view class="quan">
		<!-- 费率 -->
		<form @submit="formSubmit" @reset="formReset">
			<!-- <view class="top">兑换手续费为兑换数量的{{ num }}%</view> -->
			<!-- 选择公司 -->
			<view class="add_bank" @tap="showComments()">
				<view class="bao"> 
					<view class="bank_left">{{option.name}}</view>
					<view class="bank_xia">期权单价¥{{option.price}}</view>
				</view>
				<image @tap="choice" class="right_icon" src="/static/right.png" />
			</view>

			<!-- 变现金额 -->
			<view class="cash_in">
				<view class="title">兑换数量</view>
				<view class="input_num">
					<view class="input_left"></view>
					<input class="num" name="jin" placeholder="请输入余额数量" @input="input_btn" />
				</view>
				<view class="balance">余额数量{{ybnum}}（1.00余额=1期权）</view>
			</view>
			<!-- 验证码 -->
			<view class="cash_in_yzm">
				<view class="yzm_text">验证码</view>
				<input class="yzm" type="text" name="yzm" placeholder="手机验证码" />
				<view v-if="show_yzm"><view class="yzm_btn" @tap="yzm">获取验证码</view></view>
				<view v-else>
					<view class="yzm_btn2">剩余{{ seconde }}s</view>
				</view>
			</view>
			<!-- 变现按钮 -->
			<view class="btn"><button type="primary" form-type="submit">确认兑换</button></view>
			<view class="rule">余额数量必须大于100元，且为100整数倍</view>
		</form>
	</view>
</template>

<script>
export default {
	data() {
		return {
			look: true,
			show_yzm: true,
			option:'',
			num: '10.0',
			ybnum:'',
			yh_new: '',
			jine: '',
			yhxx: '',
			seconde: '60'
		};
	},
	onLoad() {
		// 期权公司请求
		 uni.request({
			url: 'http://tuiguang.yiyunoto.com/api/member/exchangeoption',
			header: { authtoken: this.$store.state.token },
			success: res => {
				console.log('11请求成功', res);
				this.option = res.data.data.compony[0];
				this.tel=res.data.data.phone
				this.ybnum=res.data.data.$passcard
				uni.stopPullDownRefresh();
			},
			fail: res => {
				console.log('请求失败', res);
			}
		});
	},
	onShow() {
		
	},
	methods: {
		onPullDownRefresh: function() {
			uni.request({
				url: 'http://tuiguang.yiyunoto.com/api/member/exchangeoption',
				header: { authtoken: this.$store.state.token },
				success: res => {
					console.log('11请求成功', res);
					this.option = res.data.data.compony[0];
					this.tel=res.data.data.phone
					this.ybnum=res.data.data.$passcard
					uni.stopPullDownRefresh();
				},
				fail: res => {
					console.log('请求失败', res);
				}
			});
		},		
		//跳转页面
		showComments(couponValidListid) {
			console.log(couponValidList.id);
			url: '';
		},
		choice:function(){
			uni.navigateTo({
				url:'../Choice_company/index'
			})
		},
		input_btn: function(e) {
			console.log(e.detail.value);
			this.jine = e.detail.value;
		},
		yzm: function() {
			console.log('获取验证码', this.tel);
			uni.request({
				url: 'http://tuiguang.yiyunoto.com/api/login/smsSend',
				method: 'POST',
				header: { authtoken: this.$store.state.token },
				data: {
					phone: this.tel
				},
				success: res => {
					this.$api.msg(res.data.msg);
					if (res.data.msg == '短信验证码发送成功') {
						(this.show_yzm = false),
							setInterval(() => {
								--this.seconde;
							}, 1000);
						setTimeout(() => {
							this.show_yzm = true;
							this.seconde=60
						}, 60000);
					}
					console.log('ya', res.data.msg); // console.log(res.data.data);
				}
			});
		},
		formSubmit: function(e) {
			console.log(e.detail.value);
			this.yhxx = e.detail.value;
			var content = this.yhxx;
			uni.request({
				url: 'http://tuiguang.yiyunoto.com/api/member/exchangeoption',
				header: { authtoken: this.$store.state.token },
				method: 'POST',
				data: {
					qid: this.option.id,
					option: content.jin,
					code:content.yzm,
				},
				success: res => {
					console.log('提现成功', res);
					this.$api.msg(res.data.msg);
					if (res.data.msg == '兑换成功') {
						uni.navigateBack()
					}
				},
				fail: res => {
					console.log('登录失败', res);
					this.$api.msg(res.data.msg);
				}
			});
		}
	}
};
</script>

<style>
.quan {
	width: 100%;
	height: 100vh;
	background: #f7f7f7;
}
.top {
	width: 100%;
	height: 70upx;
	text-align: center;
	background: #fdefd4;
	color: #5f321f;
	font-size: 28upx;
	padding-top: 20upx;
	box-sizing: border-box;
}
.add_bank {
	width: 100%;
	height: 145upx;
	background: #ffffff;
	border-bottom: #e6e6e6 1upx solid;
}
.bao {
	width: 80%;
	float: left;
}
.bank_left {
	font-size: 35upx;
	font-family: PingFangSC-Regular, PingFangSC;
	color: rgba(41, 41, 41, 1);
	padding-top: 28upx;
	padding-left: 35upx;
	box-sizing: border-box;
}
.bank_xia {
	font-size: 26upx;
	font-family: PingFangSC-Regular, PingFangSC;
	color: rgba(127, 127, 127, 1);
	padding-top: 5upx;
	padding-left: 35upx;
	box-sizing: border-box;
}
.right_icon {
	float: left;
	width: 30upx;
	height: 40upx;
	padding-top: 57upx;
	padding-left: 40upx;
	box-sizing: border-box;
}
.cash_in {
	width: 100%;
	padding-top: 18upx;
	background: #ffffff;
	box-sizing: border-box;
}
.title {
	width: 100%;
	height: 50upx;
	padding: 23upx 30upx;
	box-sizing: border-box;
	font-size: 28upx;
	font-family: PingFangSC-Regular, PingFangSC;
	color: rgba(81, 81, 81, 1);
}
.input_num {
	width: 100%;
	height: 90upx;
	border-bottom: #e6e6e6 1upx solid;
	padding-left: 30upx;
	margin-top: 20upx;
	padding-bottom: 20upx;
	box-sizing: border-box;
}
.num {
	width: 70%;
	height: 100%;
	padding-top: 27upx;
	float: left;
}
.balance {
	width: 100%;
	padding-top: 41upx;
	padding-left: 30upx;
	font-size: 26upx;
	color: #b7b7b7;
	padding-bottom: 50upx;
	box-sizing: border-box;
}
.cash_in_yzm {
	width: 100%;
	height: 100upx;
	padding: 30upx 30upx;
	margin-top: 18upx;
	box-sizing: border-box;
	background: #ffffff;
}
.yzm_text {
	width: 25%;
	float: left;
}
.yzm {
	width: 50%;
	float: left;
}

.yzm_btn {
	width: 25%;
	font-size: 26upx;
	text-align: right;
	float: right;
	color: blue;
}
.yzm_btn2 {
	width: 25%;
	font-size: 26upx;
	text-align: right;
	float: right;
	color: #dbdada;
}
.btn {
	width: 90%;
	margin: 80upx auto 30upx;
}
.rule {
	width: 100%;
	text-align: center;
	font-size: 28upx;
	color: #929292;
}
</style>
